<template>
	<view class="line-info">
		<view class="block-row">
			<view class="block-label">
				<image :src="`${imgBaseUrl}rili-icon.png`" class="icon-24 mr-4 pt-2 middle" />
				<text class="text">使用日期</text>
			</view>
			<view class="block-info dateColor">{{ formatDate(orderDetail.tour_date) }}出发</view>
		</view>
		<view class="block-row">
			<view class="block-label">
				<image :src="imgBaseUrl + 'trip-package-icon.png'" class="icon-24 mr-4 middle" />
				<text class="text">预定套餐</text>
			</view>
			<view class="block-info">{{ orderDetail.sku_name }}</view>
		</view>
		<view class="block-row">
			<view class="block-label">
				<image :src="imgBaseUrl + 'icon-tip.png'" class="icon-24 mr-4 middle" />
				<text class="text">退改规则</text>
			</view>
			<view class="block-info" @click="showTipClick">
				<text class="text">有条件退</text>
				<image :src="imgBaseUrl + 'icon-right.png'" class="right-icon ml-4" />
			</view>
		</view>
		<!-- 弹窗须知 -->
		<refund-tips
			v-model="showTipPopup"
			:listData="orderDetail.sale_use_tips"
			v-if="orderDetail.sale_use_tips"
		></refund-tips>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import RefundTips from "@/pages/order/components/refund-tips.vue"
const { orderDetail } = defineProps({
	orderDetail: {
		type: Object,
		default: () => ({}),
	},
})
console.log(orderDetail, "detail")
const imgBaseUrl = inject("imgBaseUrl")
const showTipPopup = ref(false)
const formatDate = (date: string) => {
	const [datePart] = date.split(" ") // 分割日期和时间部分
	const arr = datePart.split("-") // 分割年、月、日

	return arr.reduce((pre: string, cur: string, index: number) => {
		const suffix = ["年", "月", "日"][index]
		return pre + cur + suffix
	}, "")
}
const showTipClick = () => {
	showTipPopup.value = true
	console.log("showTipPopup", showTipPopup)
}
</script>

<style lang="scss" scoped>
.line-info {
	width: 100%;
	background: #f7f8fa;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 20rpx 16rpx;
	font-size: 24rpx;

	.block-info {
		color: #4e5969;
	}
	.dateColor {
		color: #bc8400;
	}
	.block-row {
		display: flex;
		margin-bottom: 16rpx;
		.block-label {
			color: #86909c;
			margin-right: 24rpx;
			flex-shrink: 0;
			display: inline-block;
			.middle {
				vertical-align: middle;
			}
			.text {
				vertical-align: middle;
			}
		}
	}
	.right-icon {
		width: 12rpx;
		height: 12rpx;
	}
}
</style>
